<script setup lang="ts">
import {ref} from "vue";
const emojis = "😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉 😌 😍 🥰 😘 😗 😙 😚 😋 😛 😝 😜 🤪 🤨 🧐 🤓 😎 🤩 🥳 😏 😒 😞 😔 😟 😕 🙁 ☹️ 😣 😖 😫 😩 🥺 😢 😭 😤 😠 😡 🤬 🤯 😳 🥵 🥶 😱 😨 😰 😥 😓 🤗 🤔 🤭 🤫 🤥 😶 😐 😑 😬 🙄 😯 😦 😧 😮 😲 🥱 😴 🤤 😪 😵 🤐 🥴 🤢 🤮 🤧 😷 🤒 🤕 🤑 🤠 😈 👿 👹 👺 🤡 💩 👻 💀 ☠️ 👽 👾 🤖 🎃 😺 😸 😹 😻 😼 😽 🙀 😿 😾".split(" ")


const showMenu = ref(false)

const emit = defineEmits(["emoji"])
const addEmoji = (emoji:string)=>{
  emit("emoji",emoji)
}
</script>

<template>
<v-menu v-model="showMenu" location="top">
  <template v-slot:activator="{props}">
    <v-icon icon="mdi-emoticon" v-bind="props" style="cursor: pointer"></v-icon>
  </template>
  <v-card width="400" style="display: flex;flex-wrap: wrap;padding: 10px;gap: 3px">
    <span v-for="(item,index) in emojis" class="btn" @click="addEmoji(item)">{{item}}</span>
  </v-card>
</v-menu>
</template>

<style scoped lang="scss">
.mdi-emoticon{
  transition: background-color .2s;
  &:hover{
    background-color: rgba(0,0,0,0.1);
  }
}
.btn{
  padding: 2px;
  border-radius: 2px;
  cursor: pointer;
  &:hover{
    background: #ddd;
  }
}
</style>
